<%--
  Created by IntelliJ IDEA.
  User: 86178
  Date: 2020/12/21
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title>骨松档案</title>
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <style>
        #upload_patient {
            position: relative; /* 保证子元素的定位 */
            background: #eee;
            border: 1px solid #ccc;
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        .page_nav li {
            list-style: none !important;
        }

        .page_nav li span {
            margin: 0 !important;
        }

        h3 {
            width: 82px;
            margin-top: 0px !important;
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.4px;
            color: #2a3137;
            margin-bottom: 22px;
        }

        #text {
            display: inline-block;
            margin-top: 5px;
            color: #666;
            font-family: "黑体";
            font-size: 18px;
        }

        #file {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; /* 宽高和外围元素保持一致 */
            height: 100%;
            opacity: 0;
            -moz-opacity: 0; /* 兼容老式浏览器 */
            filter: alpha(opacity=0); /* 兼容IE */
        }

        .wrap {
            position: relative;
        }

        .loading {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /* z-index:-3; */
        }

        .loadingImg {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 330px;
            left: 50%;
            margin-left: -25px;

        }

        #tablepart #example tbody tr {
            border-bottom: 1px solid #e6e6e6;
        }

        table.dataTable td:nth-child(5) a {
            color: black;
        }

        #example input {
            width: 18px;
            height: 18px;
            vertical-align: middle;
            margin: 0 auto;
            border: solid 1px #999999;
        }

        table.dataTable thead > tr > th {
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #999999;
            text-align: center;
        }

        table.dataTable td {
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
            text-align: center;
            padding: 13px 0;
        }

        #all_id {
            margin-left: 7px !important;
        }

        #query {
            width: 100px;
            line-height: 16px;
            background-color: #35acfd;
            border-radius: 5px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.3px;
            color: #ffffff;
            border: none;
            vertical-align: top !important;
        }

        /*.form span{*/
        /*font:16px*/
        /*}*/
        #news {
            height: 17px;
            font-family: PingFang-SC-Regular;
            font-size: 16.3px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }

        #searchName {
            width: 12%;
            height: 30px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
        }
        f
        #searchName1 {
            width: 12%;
            height: 30px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
        }

        #idcard {
            width: 14%;
            height: 30px;
            border-radius: 0.3rem;
            border: solid 1px #d0d0d0;
        }

        #person {
            width: 14%;
            height: 30px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
            margin-right: 20px;
        }

        #persongroup {
            height: 16px;
            font-family: PingFang-SC-Regular;
            font-size: 16.3px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }

        span, input {
            margin-right: 0.8%;
        }

        #card {
            height: 17px;
            font-family: PingFang-SC-Regular;
            font-size: 16.3px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }

        #mytool {
            float: left !important;
        }

        #example_wrapper div:nth-child(1) div:nth-child(1) {
            display: none;
        }

        #example_paginate {
            text-align: center;
        }

        .pagination > li {

        }

        .pagewidth {
            width: 100%;
            margin-top: 26px;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        thead tr {
            background: #e6e6e6;
        }

        .form1 input {
            text-indent: 1em
        }

        .titleBund {
            display: block !important;
            width: 100%;
        }

        .typePerson {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            width: 85%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div>
<%--    <%@ include file="../../breadline.jsp" %>--%>
    <%@ include file="/WEB-INF/jsp/breadline.jsp" %>
</div>
<div class="wrap">
    <div class="content" style="height:840px;">
        <div style="margin-left:14px;padding-top:20px;">
            <h3 class="titleBund"></h3>
            <div class="form1" style="margin-bottom:5px;">
                <span id="news">信息搜索</span>
                <input id="searchName" type="text" placeholder="病人姓名" class="SN">
                <input id="searchName1" type="text" placeholder="建档医生" class="SN">
                <span id="card">身份证</span>
                <input id="idcard" type="text" class="Card" placeholder="输入身份证号">
                <button id="query" onclick="refreshTable();" class="btn btn-success">
<%--                    <img src="../assets/images/search.png" alt="" style="width:16px;vertical-align: middle;"> 搜索--%>
                    <img src="" alt="" style="width: 16px;vertical-align: middle;"> 搜索
                </button>
                <button id="query" onclick="addDevice();" class="btn btn-success"
                        style="line-height:18px;margin-left:1%;font-size:17px;">
                    新增
                </button>
            </div>
            <div id="tablepart">
                <table id="example" class="display" cellspacing="10" width="100%">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>出生日期</th>
                        <th>身份证</th>
                        <th>人群</th>
                        <th>家庭地址</th>
                        <th>备注</th>
                        <th>建档医生</th>
                        <th>建档机构</th>
                        <th>建档时间</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="fileModal" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="modal-body">
                            <h4 class="content"></h4>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal" id="importModal"
                                    style="float:right;margin-right:10px;background: #35c990;border:none;">导入
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="loading" style="display: none;">
            <img src="${newframe }/images/slidebar/loading.gif" class="loadingImg">
        </div>
    </div>
</div>
<script>

    var table;
    var url = '${URL_PPPATIENTBASE_LIST_BY_SEARCH}';
    var href = window.location.search;

    var diseasesType = href.split('?')[1].split('&')[0].split('=')[1]

    function addDevice() {
        <%--window.parent.showNewModelIframe("${ctx}/pppatientbase/qianhu/toaddPatient?type=" + diseasesType, 780, 400);--%>

        window.parent.showNewModelIframe("${URL_PATIENT_TOADDPATIENT}?type=" + diseasesType, 780, 400);
    }

    if (diseasesType == '1') {
        $('.titleBund').text('高血压档案')
    } else if (diseasesType == '2') {
        $('.titleBund').text('糖尿病档案')
    } else if (diseasesType == '3') {
        $('.titleBund').text('高血脂档案')
    }else if (diseasesType == '4') {
        $('.titleBund').text('骨松档案')
    } else if (diseasesType == '5') {
        $('.titleBund').text('失智老人档案')
    }else {
        $('.titleBund').text('病人档案')
    }
    var isStorage = false;
    // 判断当前页面是否从面包线跳转过来
    if (href.indexOf("isStorage") != -1) {
        isStorage = true
    }
    var number = 0;

    function initTable() {
        table = $('#example').DataTable({
            "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-10'><'col-xs-6'f>r>" +
                "t" +
                "<'row'<'col-xs-6'i><'col-xs-6'p>>",
            "bFilter": false,//去掉搜索框
            "bAutoWidth": true, //自适应宽度
            "info": false,
            "bSort": false,
            "ordering": false,
            "sPaginationType": "full_numbers",
            "ordering": false,//是否允许Datatables开启排序
            "bProcessing": true,
            "bServerSide": true,
            "searching": false, //去掉搜索框方法一
            "bFilter": false,
            'lengthChange': false,
            "oPaginate": false,
            "sAjaxSource": url,
            "iDisplayStart": number,
            "sAjaxDataProp": "dataList",//查询后，返回的集合
//       "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
//           if ( aData.diseasesType === '请选择人群'){
//               aData.diseasesType = ""
//           }else if( aData.diseasesType === '高血压人群'){
//               aData.diseasesType = "1"
//           }else if( aData.diseasesType === '高血糖人群' ){
//               aData.diseasesType = "2"
//           }
//       },
            "fnServerData": function (sSource, aoData, fnCallback) {  //查询条件
                aoData.push(
                    {
                        "name": "realname",
                        "value": $("#searchName").val()
                    },
                    {
                        "name": "doctor",
                        "value": $("#searchName1").val()
                    },
                    {
                        "name": "idcard",
                        "value": $("#idcard").val()
                    },
                    {
                        "name": "diseasesType",
                        "value": diseasesType
                    }
                ),
                    $.ajax({
                        "dataType": 'json',
                        "url": sSource,
                        "type": 'post',
                        "data": aoData,
                        "success": function (resp) {
                            console.log(resp)
                            fnCallback(resp)
                        }
                    });
            },
            "aoColumns": [{
                "targets": 0,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('' +
                        '&nbsp;&nbsp;<a href="#" onClick="Then(this)" style="color:black;border-bottom:#35acfd dashed 1px">' + oData.realname + '</a>' +
                        '');
                }
            }, {
                "targets": 1,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if (oData.gender === 1) {
                        $(nTd).text("男")
                    } else if (oData.gender === 2) {
                        $(nTd).text("女")
                    } else {
                        $(nTd).text("")
                    }
                }
            }, {
                "targets": 2,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if (oData.idcard.length === 18) {
                        oData.birthday = oData.idcard.slice(6, 14).slice(0, 4) + '-' + oData.idcard.slice(6, 14).slice(4, 6) + '-' + oData.idcard.slice(6, 14).slice(6, 8)
                    } else {
                        oData.birthday = ""
                    }
                    $(nTd).text(oData.birthday)
                }
            }, {
                "targets": 3,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<a href='javascript:void(0)' data-id=" + oData.idcard + " onclick='Go(this)' class='searchBtn'>" + oData.idcard.slice(0,6) + '********' + oData.idcard.slice(14,18) + "</a>");
                }
            }, {
                "targets": 4,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    // $(nTd).html('<p class="typePerson"' + 'title=' + Type(oData.diseasesType) + '>' + oData.diseaseName + '</p>')
                    $(nTd).html('<p class="typePerson">' + oData.diseaseName + '</p>')
                }
            }, {
                "targets": 5,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<p class="typePerson"' + 'title=' + isNull(oData.homeaddress) + '>' + isNull(oData.homeaddress) + '</p>')
                }
            },{
                "targets": 6,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<p class="typePerson"' + 'title=' + isNull(oData.remark) + '>' + isNull(oData.remark) + '</p>')
                }
            },{
                "targets": 7,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<p class="typePerson"' + 'title=' + isNull(oData.doctor) + '>' + isNull(oData.doctor) + '</p>')
                }
            }, {
                "targets": 8,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<p class="typePerson"' + 'title=' + isNull(oData.hospName) + '>' + isNull(oData.hospName) + '</p>')
                }
            }, {
                "targets": 9,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).text(oData.createdtime.slice(0, 10))
                }
            }],
            "createdRow": function (row, data, index) {

            },
            "oLanguage": {//插件的汉化
                "sLengthMenu": "32",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "oPaginate": {
                    "sFirst": "",
                    "sPrevious": "<b>上一页<b>",
                    "sLast": "",
                    "sNext": "<i>下一页</i>"

                },
                "sZeroRecords": "没有检索到数据",
                "sProcessing": "<img src='' />",
                "sSearch": "搜索"
            }
        });
    }

    $(document).ready(function () {
        if (isStorage) {
            number = (Number(sessionStorage.getItem('pageNumber')) - 1) * 10;
        }
        initTable();
        $('#example tr th').eq(10).addClass('border_right');
        $('#example tbody tr td').addClass('active');
        $('#example tr td').eq(10).addClass('border_right');
        $('#example_paginate').parent().addClass('pagewidth');
        $('#example_info').parent().addClass('showPage');
        $('#example_length').parent().addClass('pageNow');
//    console.log($('#example tbody').childNodes)
//       点击身份证号和姓名跳转
        <%--      $('#example tbody').on( 'click', "td.eq(3)", function (e) {--%>
        <%--        debugger--%>
        <%--        var rowData = table.row( $(this).parents('tr') ).data();--%>
        <%--        &lt;%&ndash;window.location.href='${URL_ADM_FOLLOWUP_TOSEARCH_FOLLOWUP_PLAN}?hospitalId=' +rowData.id;&ndash;%&gt;--%>
        <%--      });--%>
    });

    function Go(obj) {
        var breadname = '骨松病人信息';
        var name = $(obj).attr('data-id');
        $.ajax({
            url: "${URL_SCREENING_GETBREADLINE}",
            dataType: 'json',
            type: 'post',
            success: function (data) {
                breadLine = JSON.parse(data.data)
                var url = '${URL_PATIENT_TOARCHIVES}?idCard=' + name + '&diseasesType=5';
                breadLine.push({
                    name: breadname,
                    href: url
                })
                $.ajax({
                    url: '${URL_SCREENING_SAVEBREADLINE}',
                    data: {
                        breadLine: JSON.stringify(breadLine)
                    },
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        parent.showSrc('${ctx}/boneLoose/qianhu/detail?idCard=' + name + '&diseasesType=5')
                    }
                })
            }
        })
    }

    // 判断是否为 null
    function isNull(data) {
        var str = '';
        if (data != null) {
            str = data
        }
        return str
    }

    function Then(obj) {
        var breadname = '骨松病人信息';
        var idDom = obj.parentNode.parentNode.children[3].children[0];
        var name = $(idDom).attr('data-id');
        $.ajax({
            url: "${URL_SCREENING_GETBREADLINE}",
            dataType: 'json',
            type: 'post',
            success: function (data) {
                breadLine = JSON.parse(data.data)
                var url = '${URL_PATIENT_TOARCHIVES}?idCard=' + name + '&diseasesType=5';
                breadLine.push({
                    name: breadname,
                    href: url
                })
                $.ajax({
                    url: '${URL_SCREENING_SAVEBREADLINE}',
                    data: {
                        breadLine: JSON.stringify(breadLine)
                    },
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        parent.showSrc('${ctx}/boneLoose/qianhu/detail?idCard=' + name + '&diseasesType=5')
                    }
                })
            }
        })
    }

    // 多选按钮
    $("#all_id").click(function () {
        if (this.checked) {
            $("input[name='id']").each(function () {
                $(this)[0].checked = true;
            });
        } else {
            $("input[name='id']").each(function () {
                $(this)[0].checked = false;
            });
        }
    });

    // 判断是否已经全选
    function isCheckedAll(ev) {
        // 阻止冒泡事件
        var oEvent = ev || event;
        oEvent.cancelBubble = true;
        var isCheckAll = true;
        $("input[name='id']").each(function () {
            if (!this.checked) {
                isCheckAll = false;
            }
        });
        if (isCheckAll) {
            $("#all_id")[0].checked = true;
        } else {
            $("#all_id")[0].checked = false;
        }
    }

    function getCheckedArray() {
        var checkedArray = [];
        $("input[name='id']").each(function () {
            if (this.checked) {
                checkedArray.push(this.value);
            }
        });
        return checkedArray;
    }

    function getValue() {
        var oTable = $('#example').dataTable();
        var oSettings = oTable.fnSettings();
        // 获取页码值
        return oSettings._iDisplayStart;
    }

    window.onbeforeunload = function (e) {
        var e = window.event || e;
        var pageNumber = getValue();
        // 获取当前页码
        if (pageNumber == 0) {
            pageNumber = 1;
        } else {
            pageNumber = pageNumber / 10 + 1;
        }
        // console.debug(pageNumber);
        // 保存在本地
        sessionStorage.setItem('pageNumber', pageNumber);
    }
</script>
</body>
</html>
